{include file="common/header" /}

<!-- <body style="margin-top:-20px; background-color: #eaeef2; background-image: url(public/images/index/背景.jpg) ;"> -->
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .yearstep-item {
        display: inline-block;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        text-align: center;
        position: relative;
    }

    .item-content-container {
        width: 80px;
        height: 80px;
        position: absolute;
        top: 0;
        left: 0;
        margin: 9px;
        border-radius: 50%;
    }

    /*项目进度css start*/

    #carousel-inner-pro {

        position: absolute;
        left: 100;
    }

    #carousel-pro {
        width: 1200px;
        height: 100px;
        overflow: hidden;
        position: relative;
    }

    .li-pro {
        float: left;
    }

    .item-content-container:hover {
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -o-transform: scale(1.2);
        -ms-transform: scale(1.2);
    }



    /* 项目进度css end */
</style>

<body style="margin-top:-20px;">
    <div style="margin-left: 0px;">
        <div style="margin-left: auto;margin-right: auto;">
            <!--导航栏结束-->
            <!--轮播图和新闻栏开始-->
            <div class="middle" style="box-shadow: 2px 2px 16px rgba(181, 174, 174, 0.78);border: 0px solid #fff; width: 1192px; height: 424px;">
                <div class="newandcarousel" style="border: 2px solid #fff;width: 1188px;height: 420px; margin: 0px auto;">
                    <!--轮播图开始-->
                    <div class="carousel" style="margin-top: 6px;margin-left: 16px; width: 790px;height: 402px;box-shadow: 3px 5px 7px rgba(115, 113, 113, 0.67); border-radius: 3px;">
                        <ol> </ol>
                        <ul style="width: 800px; height: 402px;">
                            <li class="active" style="left:0; z-index:0; width: 796px; height: 402px;">
                                <img style="width: 796px; height: 402px; box-shadow: 3px 5px 7px rgba(171, 166, 166, 0.67); border-radius: 3px;" src="static/images/index/20170101.jpg">
                            </li>
                            <li style="width: 796px; height: 402px;">
                                <img style="width: 796px; height: 402px; box-shadow: 3px 5px 7px rgba(171, 166, 166, 0.67); border-radius: 3px;" src="static/images/index/20170102.jpg">
                            </li>
                            <li style="width: 796px; height: 402px;">
                                <img style="width: 796px; height: 402px; box-shadow: 3px 5px 7px rgba(171, 166, 166, 0.67); border-radius: 3px;" src="static/images/index/81.jpg">
                            </li>
                            <li style="width: 796px; height: 402px;">
                                <img style="width: 796px; height: 402px; box-shadow: 3px 5px 7px rgba(171, 166, 166, 0.67); border-radius: 3px;" src="static/images/index/20170103.jpg">
                            </li>
                        </ul>
                    </div>
                    <!--轮播图结束-->
                    <!--新闻栏开始-->
                    <div class="new" style="margin: -402px 0 0 836px;width: 336px;height: 402px;box-shadow: 2px 4px 10px rgb(177, 173, 173);">
                        <div class="side">
                            <div class="hd">
                                <h3 class="title4">
                                    <a href="index.php/Listall/index/WeCidpGis/1">
                                        <img src="static/images/index/new.jpg" style="width:267px;height:94px;">
                                    </a>
                                </h3>
                            </div>
                            <div class="ranklist">
                                <ul>
                                    {volist name="news" id="news"}

                                    <li style="margin-left:-33px;">
                                        <p>
                                            <a href="index.php/WeCidpGis/get_Id/WeCidpGis/{$news.NewsID}">
                                                {$news.Title}</a>
                                        </p>
                                        <span class="num" style="margin:-4px 10px 0 0;">{$news.Time}</span>
                                        </br>
                                        </br>
                                    </li>
                                    {/volist} {volist name="project" id="projectN"}
                                    <li style="margin-left:-33px;">
                                        <p>
                                            <a href="index.php/WeCidpGis/get_Id/project/{$projectN.ProjectID}">
                                                {$projectN.Title}</a>
                                        </p>
                                        <span class="num" style="margin:-4px 10px 0 0;">{$projectN.Time}</span>
                                        </br>
                                        </br>
                                    </li>
                                    {/volist} {volist name="share" id="shareN"}
                                    <li style="margin-left:-33px;">
                                        <p>
                                            <a href="index.php/WeCidpGis/get_Id/share/{$shareN.ShareID}">
                                                {$shareN.Title}</a>
                                        </p>
                                        <span class="num" style="margin:-4px 10px 0 0;">{$shareN.Time}</span>
                                        </br>
                                        </br>
                                    </li>
                                    {/volist} {volist name="activity" id="activityN"}
                                    <li style="margin-left:-33px;">
                                        <p>
                                            <a href="index.php/WeCidpGis/get_Id/activity/{$activityN.ActID}">
                                                {$activityN.Title}</a>
                                        </p>
                                        <span class="num" style="margin:-4px 10px 0 0;">{$activityN.Time}</span>
                                        </br>
                                        </br>
                                    </li>
                                    {/volist}
                                </ul>
                            </div>
                            <!-- 通知公告 E -->
                        </div>
                    </div>
                    <!--新闻栏结束-->
                </div>
            </div>
            <!--轮播图和新闻栏结束-->
            <!--今年项目start-->
            <div class="yearstep" id="js_projectgroup" style="box-shadow: 2px 2px 20px rgba(169, 169, 169, 0.74);border: 0px solid rgb(255, 255, 255);width: 1200px;margin: 0 auto;padding: 0 10px;box-sizing: border-box;">
                <div id="carousel-pro" style="">

                </div>
            </div>
            <!--今年项目end-->
            <!--四大块start-->
            <div class="middlenext" style="padding: 20px 0; border: 1px solid #fff; box-shadow: 0 0 3px #fff; background: #FFF; width: 1192px;">
                <!--左边样式start-->
                <div class="firstbox" style="box-shadow: 2px 2px 7px #b5aeae;border: 6px solid #fff;height: 387px;margin-top: 333px;width: 370px;">
                    <div class="leftheader" style="border-bottom:1px solid #fff;width: 366px;">
                        <div class="lefttitle" style="font-family:微软雅黑, 宋体; font-size: 20px; color: rgba(4, 129, 214, 0.69);margin-left: 38px; line-height: 66px;">
                            协会讲座</div>
                        <div class="leftetitle" style="width: 74px;margin-left: 138px;margin-top: -86px; font-style: italic;text-shadow: 1px 2px 3px #9c9797; color: rgba(4, 129, 214, 0.69);">Lecture
                            <a href="index.php/Listall/index/activity/1" style=" color:#fff;">
                                <button class="button button-primary button-box button-small" style="margin:-68px 0px 0px 128px;background-color: rgb(88, 160, 242);box-shadow: 1px 1px 4px rgb(68, 68, 68);width: 54px;">
                                    <i class="fa fa-plus" style="color:#fff;">更多</i>
                                </button>
                            </a>
                        </div>
                    </div>
                    <div class="leftconnect" style="width: 366px;margin-top: 0px; height: 204px;">
                        <div class="firstdata" style="width: 366px; height: 204px;">
                            {volist name="fistActivity" id="fistActivity"}
                            <div class="firstimage" style=" width: 366px; height: 204px;">
                                <a href="index.php/WeCidpGis/get_Id/activity/{$fistActivity.ActID}">
                                    <img src="{$fistActivity.ActImage}" style="width: 284px;height: 204px; margin-left: 38px;" />
                                </a>
                            </div>
                            {/volist}
                        </div>

                        <div class="leftinformation" style="width: 240px;height: 56px; margin-left: 20px;">
                            <ul>
                                {volist name="activity" id="activity"}
                                <li style="border-bottom:1px solid #fff; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; ">
                                    <a href="index.php/WeCidpGis/get_Id/activity/{$activity.ActID}">
                                        <span style="color:#AD642F;font-size:30px">.</span>{$activity.Title}
                                    </a>
                                </li>
                                {/volist}
                            </ul>
                        </div>
                        <div class="leftdata" style="width: 100px;height: 80px;margin: -56px 0 0 272px;">
                            <span class="spanstyle">
                                <ul>
                                    {volist name="activityT" id="actTT"}
                                    <li style="border-bottom:1px solid #fff;">
                                        <p style="font-size:12px;">{$actTT.Time}
                                        </p>
                                    </li>
                                    {/volist}
                                </ul>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="thirdbox" style="box-shadow: 2px 2px 7px #b5aeae;border: 6px solid #fff;height: 386px;width: 370px;margin-top: -400px;margin-left: 806px;">
                    <div class="leftheader" style="border-bottom:1px solid #fff;width: 366px;">
                        <div class="lefttitle" style="font-family:微软雅黑, 宋体; font-size: 20px; color: rgba(4, 129, 214, 0.69);margin-left: 38px; line-height: 66px;">协会荣誉</div>
                        <div class="leftetitle" style=" width: 74px; margin-top: -84px; font-style: italic;text-shadow: 1px 2px 3px #9c9797; color: rgba(4, 129, 214, 0.69);">Honor
                            <a href="index.php/Project/view/1" style=" color:#fff;">
                                <button class="button button-primary button-box button-small" style="margin:-66px 0px 0px 132px;background-color: rgb(88, 160, 242);box-shadow: 1px 1px 4px rgb(68, 68, 68);width: 54px;">
                                    <i class="fa fa-plus" style=" color:#fff;">更多</i>
                                </button>
                            </a>
                        </div>
                    </div>
                    <div class="leftconnect" style="width: 366px;margin-top: 0px; height: 204px;">
                        <div class="firstdata" style="width: 366px; height: 204px;">
                            {volist name="fistProject" id="fistProject"}
                            <div class="firstimage" style=" width: 366px; height: 204px;">
                                <a href="index.php/WeCidpGis/get_Id/project/{$fistProject.ProjectID}">
                                    <img style="width: 284px;height: 204px; margin-left: 38px;" src="{$fistProject.ProjImg}" />
                                </a>
                            </div>
                            {/volist}
                        </div>

                        <div class="leftinformation" style=" width: 240px;height: 56px;margin-left: 20px;">
                            <ul>
                                {volist name="project" id="project"}
                                <li style="border-bottom:1px solid #fff; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; ">
                                    <a href="index.php/WeCidpGis/get_Id/project/{$project.ProjectID}">
                                        <span style="color:#AD642F;font-size:30px;">.</span>{$project.Title}</a>
                                </li>{/volist}
                            </ul>
                        </div>
                        <div class="leftdata" style="width: 100px;height: 80px;margin: -56px 0 0 272px;">
                            <ul> {volist name="projectT" id="project"}
                                <li style="border-bottom:1px solid #fff;">
                                    <p style="font-size:12px">{$project.Time}</p>
                                    <!--修改处-->
                                </li>
                                {/volist}
                            </ul>
                        </div>
                    </div>
                </div>
                <!--左边样式/-->
                <!--右边样式start-->
                <div class="secondbox" style="box-shadow: 2px 2px 7px #b5aeae;border: 6px solid #fff;height: 386px;width: 370px;margin-top: -396px;margin-left: 404px;">
                    <div class="rightheader" style="border-bottom:1px solid #fff;width: 366px;">
                        <div class="righttitle" style="font-family:微软雅黑, 宋体; font-size: 20px; color: rgba(4, 129, 214, 0.69);margin-left: 38px; line-height: 66px;">协会新闻</div>
                        <div class="rightetitle" style="width: 74px;margin-left: 138px;margin-top: -84px; font-style: italic; text-shadow: 1px 2px 3px #9c9797; color: rgba(4, 129, 214, 0.69);">
                            Notification
                            <div style="margin:-60px 0 0 201px;">
                                <a href="index.php/Listall/index/share/1" style=" color:#fff;">
                                    <button class="button button-primary button-box button-small" style="margin:-6px 0px 0px -74px;background-color: rgb(88, 160, 242);box-shadow: 1px 1px 4px rgb(68, 68, 68);width: 54px;">
                                        <i class="fa fa-plus" style=" color:#fff;">更多</i>
                                    </button>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="rightconnect" style="width: 366px;margin-top: 0px; height: 204px;">
                        <div class="firstdata" style="width: 366px; height: 204px;">
                            {volist name="fistShare" id="fistShare"}
                            <div class="firstimage" style=" width: 366px; height: 204px;">
                                <a href="index.php/WeCidpGis/get_Id/share/{$fistShare.ShareID}">
                                    <img style="width: 284px;height: 204px; margin-left: 38px;" src="{$fistShare.shareimage}" />
                                </a>
                            </div>
                            {/volist}
                        </div>

                        <div class="rightinformation" style=" width: 240px; height: 56px; margin-left: 20px;">
                            <ul> {volist name="share" id="share"}
                                <li class="listyleone" style="border-bottom:1px solid #fff; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; ">
                                    <a href="index.php/WeCidpGis/get_Id/share/{$share.ShareID}">
                                        <span style="color:#AD642F;font-size:30px">.</span>
                                        {$share.Title}
                                    </a>
                                </li>
                                {/volist}
                            </ul>
                        </div>
                        <div class="rightdata" style="width: 100px;height: 80px;margin: -56px 0 0 272px;">
                            <ul>
                                {volist name="shareT" id="sha"}
                                <li style="border-bottom:1px solid #fff;">
                                    <p style="font-size:12px">{$sha.Time}</p>
                                </li>
                                {/volist}
                            </ul>

                        </div>
                    </div>
                </div>
                <div class="fourthbox" style="box-shadow:1px 4px 6px #ccc8c8;border: 6px solid #fff;height: 332px;margin-top: -758px;margin-left: -2px; width: 1182px;">
                    <div class="leftconnect">
                        <div class="pimages" style="margin-left: -317px;margin-top: -6px;height: 326px; width: 542px;">
                            <a href="ntimeroller.php">
                                <img src="static/images/index/star.jpg" style="width: 542px;height: 326px;margin:0 0 0 0; box-shadow: 3px 4px 5px rgb(171, 166, 166);"
                                />
                            </a>
                        </div>
                    </div>
                    <div class="leftheader" style="border-bottom:1px solid #c3bdbd;margin-left: 680px; margin-top: -238px;">
                        <div class="lefttitle" style="font-family:微软雅黑, 宋体; font-size: 20px; color: rgba(4, 129, 214, 0.69);margin-left: 38px; line-height: 66px;">简介
                        </div>
                        <div class="leftetitle" style="height: 84px;margin: -84px 0 0 135px; width: 168px;margin-left: 112px; font-style: italic; text-shadow: 1px 2px 3px #9c9797; color:rgba(4, 129, 214, 0.69);">Brief Introduction
                            <div style="margin:-62px 0 0 271px;">
                                <a href="index.php/WeCidpGis/Intent/oldandnew" style=" color:#fff;">
                                    <button class="button button-primary button-box button-small" style="background-color: rgb(88, 160, 242);box-shadow: 1px 1px 4px rgb(68, 68, 68);width: 54px;margin-left: -14px; margin-top: -6px;">
                                        <i class="fa fa-plus" style=" color:#fff;">详情</i>
                                    </button>
                                </a>
                            </div>
                        </div>
                        <div class="pdescribe" style="margin-top: 2px;height: 252px;width: 515px;margin-left: -56px;">
                            </br>
                            <p style="line-height:34px;font-size:18px;color: rgb(98, 95, 95);font-family: 宋体; width: 428px;margin-left: 80px;height: 252px;overflow:hidden;display:block;">
                                &nbsp&nbsp防灾GIS协会是一个由黄猛老师领导的院级别协会。是以GIS为基础软件开发为基准，资源共享的学习平台。自2007年防灾GIS协会成立以来，本着“以教科研项目+学科竞赛为载体，培养学习兴趣，激发个人潜能，增强实践能力和培养创新能力,共创美好未来”的原则，积极参加各种专业比赛和相关项目。
                            </p>
                        </div>
                    </div>
                </div>
                <!--右边样式end-->
            </div>
            <!--四大块end-->
            {include file="common/footer"/}
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            // 项目进度展示
            var ProjectGroup = {
                data: {

                },
                init: function () {
                    var methods = this.methods;
                    methods.projectData(methods.handleCallback);
                },
                methods: {
                    settings: {
                        color_height_pre: '#1D87FD',
                        color_middle_pre: '#FC7F3B',
                        color_low_pre: '#A91E23'
                    },
                    projectData: function (callback) {
                        var _self = this;
                        $.ajax({
                            type: "GET",
                            url: "index.php/ProRate/Readgispro",
                            dataType: 'json',
                            success: function (res) {
                                callback.bind(_self)(res);
                            },
                            error: function (res) {
                                callback.bind(_self)(0);
                            }
                        });
                    },
                    handleCallback: function (res) {
                        if (res === 0) {
                            alert("网络错误");
                        } else {
                            var carousel_pro = $('#carousel-pro');
                            carousel_pro.append(this.handleProjectdata.bind(this)(res));
                        }
                    },
                    handleProjectdata: function (data) {
                        var pnode = document.createDocumentFragment(),
                            node = this.prduceItems(data);
                        pnode.appendChild(node);
                        return $(pnode);
                    },
                    prduceItems: function (items) {
                        var _self = this,
                            _ul = $("<ul id='carousel-inner-pro' style='left: 0;'></ul>");;
                        items.volist(function (item) {
                            var color = _self.getColor(item.rate),
                                canvas = _self.drawCanvas(item, color),
                                parnode = $("<div class='yearstep-item' style='" + color + ";'><div class='item-content-container' style='" + color + ";'> </div></div>"),
                                childfirstnode = $(canvas),
                                liElement = $('<li class="li-pro" style="display:inline-block;margin: 1px 25px 0px 25px;"></li>');
                            parnode.append(childfirstnode);
                            liElement.append(parnode);
                            _ul.append(liElement);
                        });
                        items.volist(function (item) {
                            var color = _self.getColor(item.rate),
                                canvas = _self.drawCanvas(item, color),
                                parnode = $("<div class='yearstep-item'  " + color + ";'><div class='item-content-container' style='" + color + ";'> </div></div>"),
                                childfirstnode = $(canvas),
                                liElement = $('<li class="li-pro" style="display:inline-block;margin: 1px 25px 0px 25px;"></li>');
                            parnode.append(childfirstnode);
                            liElement.append(parnode);
                            _ul.append(liElement);
                        });
                        return _ul[0];
                    },
                    getColor: function (precent) {
                        precent = parseFloat(precent);
                        var color = '',
                            settings = this.settings;
                        if (0 < precent && precent <= 50) {
                            color = settings.color_low_pre;
                        } else if (50 < precent && precent <= 80) {
                            color = settings.color_middle_pre;
                        } else {
                            color = settings.color_height_pre;
                        }
                        return color;
                    },
                    drawCanvas: function (item, color) {
                        var canv = document.createElement('canvas');
                        var canten = canv.getContext('2d');
                        canten.canvas.width = 100;
                        canten.canvas.height = 100;
                        canten.beginPath();
                        canten.lineWidth = 10;
                        canten.strokeStyle = "#D2CECE";
                        canten.arc(50, 50, 45, -90 * Math.PI / 180, (100 * 3.6 - 90) * Math.PI / 180);
                        canten.stroke();
                        canten.beginPath();
                        canten.lineWidth = 10;
                        canten.strokeStyle = color;
                        canten.shadowColor = "#D2CECE";
                        canten.shadowOffsetX = 3;
                        canten.shadowOffsetY = 3;
                        canten.shadowBlur = 2;
                        canten.arc(50, 50, 45, -90 * Math.PI / 180, (item.rate * 3.6 - 90) * Math.PI / 180);
                        canten.stroke();
                        canten.font = "bold  20px Courier New";
                        canten.fillStyle = "#0000CD";
                        canten.textAlign = 'center';
                        canten.textBaseline = 'middle';
                        canten.fillText(item.rate.toString() + '%', 50, 40);
                        canten.font = " 10px Courier New";
                        canten.fillStyle = "#555";
                        canten.textAlign = 'center';
                        canten.textBaseline = 'middle';
                        //canten.fillText(item.proname,50,60);
                        //canten.fillText(item.proname,50,55);
                        this.drawWrapString(item.proname, canten, 50, 60);
                        return canv;
                    },
                    drawWrapString: function (longtext, cxt, begin_width, begin_height) {
                        var linelenght = 5;
                        var text = "";
                        var count = 0;
                        var begin_width = begin_width;
                        var begin_height = begin_height;
                        var stringLenght = longtext.length;
                        var newtext = longtext.split("");
                        var context = cxt;
                        context.textAlign = 'center';
                        for (i = 0; i <= stringLenght; i++) {

                            if (count == 5) {
                                context.fillText(text, begin_width, begin_height);
                                begin_height = begin_height + 15;
                                text = "";
                                count = 0;
                            }
                            if (i == stringLenght) {
                                context.fillText(text, begin_width, begin_height);
                            }
                            var text = text + newtext[0];
                            count++;
                            newtext.shift();
                        }




                    }
                }
            };
            ProjectGroup.init();
        });

        function animate(offset) {
            {
                var list = document.getElementById('carousel-inner-pro');
                var newLeft = parseInt(list.style.left) + offset;
                list.style.left = newLeft + 'px';
                if (newLeft > 0) {
                    list.style.left = -1950 + 'px';
                }
                if (newLeft < -1950) {
                    list.style.left = 0 + 'px';
                }
            }
        }

        function play() {
            var container = document.getElementById('carousel-pro');

            var index = 1;
            var timer;
            timer = setInterval(function () {
                index += 1;
                if (index > 5) {
                    index = 1
                }
                animate(-1);
                //buttonsShow();
            }, 10)
        }
        play();

        (function ($) {
            $.fn.myScroll = function (options) {
                //默认配置
                var defaults = {
                    speed: 40,  //滚动速度,值越大速度越慢
                    rowHeight: 24 //每行的高度
                };
                var opts = $.extend({}, defaults, options), intId = [];
                function marquee(obj, step) {
                    obj.find("ul").animate({
                        marginTop: '-=1'
                    }, 0, function () {
                        var s = Math.abs(parseInt($(this).css("margin-top")));
                        if (s >= step) {
                            $(this).find("li").slice(0, 1).appendTo($(this));
                            $(this).css("margin-top", 0);
                        }
                    });
                }
                this.each(function (i) {
                    var sh = opts["rowHeight"], speed = opts["speed"], _this = $(this);
                    intId[i] = setInterval(function () {
                        if (_this.find("ul").height() <= _this.height()) {
                            clearInterval(intId[i]);
                        } else {
                            marquee(_this, sh);
                        }
                    }, speed);
                    _this.hover(function () {
                        clearInterval(intId[i]);
                    }, function () {
                        intId[i] = setInterval(function () {
                            if (_this.find("ul").height() <= _this.height()) {
                                clearInterval(intId[i]);
                            } else {
                                marquee(_this, sh);
                            }
                        }, speed);
                    });
                });
            }
        })(jQuery);
        $(function () {
            $("div.ranklist").myScroll({
                speed: 80,
                rowHeight: 34
            });
        });
    </script>
    <script type="text/javascript">
        /* 知识点：        */
        /*       this用法 */
        /*       DOM事件 */
        /*       定时器 */

        window.onload = function () {




            //function stop() {
            // clearInterval(timer);
            //}


            // function buttonsShow() {
            //     //将之前的小圆点的样式清除
            //     for (var i = 0; i < buttons.length; i++) {
            //         if (buttons[i].className == "on") {
            //             buttons[i].className = "";
            //         }
            //     }
            //     //数组从0开始，故index需要-1
            //     buttons[index - 1].className = "on";
            // }

            // prev.onclick = function () {
            //     index -= 1;
            //     if (index < 1) {
            //         index = 5
            //     }
            //     buttonsShow();
            //     animate(600);
            // };


            // for (var i = 0; i < buttons.length; i++) {
            //     (function (i) {
            //         buttons[i].onclick = function () {

            //             /*  这里获得鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上，去谷歌this的用法  */
            //             /*  由于这里的index是自定义属性，需要用到getAttribute()这个DOM2级方法，去获取自定义index的属性*/
            //             var clickIndex = parseInt(this.getAttribute('index'));
            //             var offset = 600 * (index - clickIndex); //这个index是当前图片停留时的index
            //             animate(offset);
            //             index = clickIndex; //存放鼠标点击后的位置，用于小圆点的正常显示
            //             buttonsShow();
            //         }
            //     })(i)
            // }

            // container.onmouseover = stop;
            // container.onmouseout = play;


        }
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        a,
        a:visited {
            text-decoration: none;
        }

        a:hover {
            color: #b52725;
        }

        .clear {
            display: block;
            overflow: hidden;
            clear: both;
            height: 0;
            line-height: 0;
            font-size: 0;
        }

        body {
            font: 12px/180% Arial, Helvetica, sans-serif;
        }

        .demo {
            width: 600px;
            margin: 20px auto;
            padding: 0 10px;
        }

        .demo h2 {
            font-size: 14px;
            height: 30px;
            line-height: 30px;
            padding: 15px 0;
        }

        .ranklist {
            height: 210px;
            overflow: hidden;
            line-height: 220%
        }

        .ranklist li {
            height: 17px;
            overflow: hidden;
            position: relative;
            padding: 0 86px 0 43px;
            margin: 28px 0 -11px 0;
        }

        .ranklist li em {
            background: url(images/index/mun.gif) no-repeat;
            width: 20px;
            height: 16px;
            overflow: hidden;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            font-style: normal;
            color: #333;
        }

        .ranklist li em {
            background-position: 0 -16px;
        }

        .ranklist li.top em {
            background-position: 0 0;
        }

        .ranklist li .num {
            position: absolute;
            right: 0;
            top: 0;
        }

        .ranklistyle {
            position: relative;
        }

        .t_c_bottom a:hover {
            color: #ddd;
        }
    </style>
</body>